<template>
  <div id="app">
    <x-header default="课程"
              :right-options="{showMore: true}"
              @on-click-more="showMenus = true">
      <x-icon slot="overwrite-left"
              type="navicon"
              size="35"

              style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
    </x-header>
    <router-view></router-view>

    <footer class="main-footer" id="mainFooter">
      copyright @ 2017
    </footer>


    <div v-transfer-dom>
      <actionsheet :menus="menus"
                   @on-click-menu="menuClick"
                   v-model="showMenus"
                   show-cancel></actionsheet>
    </div>
  </div>
</template>

<script>
import { XHeader, Actionsheet, TransferDom } from 'vux'

export default {
  name: 'app',
  data () {
    return {
      showMenus: false,
      menus: [
        {
          key: 'user',
          label: '用户中心',
          value: 'user'
        },
        {
          key: 'index',
          label: ' 课程列表',
          value: 'index'
        },
        {
          key: 'car',
          label: '查看购物车',
          value: 'car'
        }
      ]
    }
  },
  directives: {
    TransferDom
  },
  components: {
    XHeader,
    Actionsheet
  },
  methods: {
    menuClick (key) {
      switch (key) {
        case 'user':
          this.$router.push({
            name: ''
          })
          break
        case 'car':
          this.$router.push({
            name: 'shoppingCar'
          })
          break
        case 'index':
          this.$router.push({
            name: 'courseList'
          })
          break
      }
    }
  }
}
</script>

<style lang="scss">
#app {
}

p {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
a {
  text-decoration: none;
}

  ul {
    margin: 0;
    padding: 0;
    li {
      margin: 0;
      padding: 0;
    }
  }


  #mainFooter {
    background-color: #35495e;
    color: #FFF;
    margin-top: 20px;
    padding: 20px 0;
    font-size: 12px;
    text-align: center;
  }
</style>
